<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DTCLoud对象设计器</title>

    <link rel="stylesheet" type="text/css"  href="css/public.css"/>
    <link rel="stylesheet" type="text/css"  href="./css/index.css"/>
    <link rel="stylesheet" type="text/css"  href="./css/index-pageCreate.css"/>

    <!-- 主体显示样式 -->
    <link rel="stylesheet" type="text/css"  href="./css/index-body.css"/>
    <!-- 头部样式 -->
    <link rel="stylesheet" type="text/css"  href="./css/index-header.css"/>   
    <!-- right页面控制器样式 -->
    <link rel="stylesheet" type="text/css"  href="./css/index-controller.css"/>
    <!-- left属性控制器 -->
    <link rel="stylesheet" type="text/css"  href="./css/index-properties.css"/>

    <!-- 组件管理内容样式 -->
    <link rel="stylesheet" type="text/css"  href="./css/component/component-manage.css"/>
    
    <!-- canvas属性 -->
    <link rel="stylesheet" type="text/css"  href="./css/canvas.css"/>


</head>
<body>
    
    <!-- 主要操控设计类 -->
    <div id="body">

        <!-- 存放背景的内容 -->
        <div id="body-bg">
            <span  
            :style=" {
                transform:'translateX('+(requestData.canvasThisPosition.x*(requestData.mediaSize.data / 100) )+'px) translateY('+ (requestData.canvasThisPosition.y*(requestData.mediaSize.data / 100))   +'px) scale('+(requestData.mediaSize.data / 100)+') ', 
            }">
                文本域{requestData.mediaSize.data }!
            </span>
        </div>
        <!-- 存放线条的内容 -->
        <div id="body-lines">
            <svg id="body-object-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" style=" pointer-events: none;" 
                v-if="stringList"
            >
				<g id="main-group-scale" transform="matrix(1 0 0 1 0.5 0.5)">
					<g id="main-group-position" text-rendering="optimize-speed"
						:transform="'translate( '+(   (   (requestData.canvasThisPosition.x+window.w/2)*(requestData.mediaSize.data / 100) ))+' '+ ( ((requestData.canvasThisPosition.y+window.h/2)*(requestData.mediaSize.data / 100)))+' )'+ (' scale('+(requestData.mediaSize.data / 100)+')')" style="transform-origin: center center;"
                       
                        >

						<component v-for="(value , key) in stringList" 
                            :key="key" 
                            :is="'canvas_svg_string'"
                            :to-uuid="value.parentId"
                            :parent-id="value.childrenId"
                            
                             />
                             <!-- @increase="getDom" -->
                         
					</g>
				</g>
			</svg>
        </div>
        <!-- 存放物体的内容 -->
        <div id="body-object">
            <svg id="body-object-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" 
            >
<!-- 
            v-on:mousedown="fun_on_mousedown" 
            v-on:mousemove="fun_on_mousemove" 
            v-on:dblclick="fun_window_doubleClick" -->
                <!--v-on:click="fun_window_onClick"-->
				<!-- 
					组织架构
						组 方块的倍数用于方法缩小
							组 方块的总移动 用于屏幕大小的移动和手动的移动
								组 用于每个模块之间的移动组
				
				-->


				<g id="main-group-scale" transform="matrix(1 0 0 1 0.5 0.5)">
					<g id="main-group-position" text-rendering="optimize-speed"
						:transform="'translate( '+(   (   (requestData.canvasThisPosition.x+window.w/2)*(requestData.mediaSize.data / 100) ))+' '+ ( ((requestData.canvasThisPosition.y+window.h/2)*(requestData.mediaSize.data / 100)))+' )'+ (' scale('+(requestData.mediaSize.data / 100)+')')" style="transform-origin: center center;">

						<component v-for="(value , key) in requestData[requestData.modelType]" :key="key" :is="value.component"
							 :to-uuid="key"
                             :model-type="requestData.modelType" />
                             <!-- @increase="getDom" -->

                        <!-- 当前选择的光边 -->
                       
                         <g style="pointer-events: none;">
                              <!--
                            <rect v-show="computed_selectComponentID.isShow" class="svg_selectBox_border"
                                :x="computed_selectComponentID.x"
                                :y="computed_selectComponentID.y"
                                :width="computed_selectComponentID.w"
                                :height="computed_selectComponentID.h" rx="3" ry="3"
                                stroke="rgba(57, 80, 96,1)" fill="none" stroke-width="1">
                            </rect>
                          
-->  
                            <rect v-for="entity in computed_selectComponentID" v-show="entity.isShow" class="svg_selectBox_border"
                                :x="entity.x"
                                :y="entity.y"
                                :width="entity.w"
                                :height="entity.h" rx="3" ry="3"
                                stroke="rgba(57, 80, 96,1)" fill="none" stroke-width="1">
                            </rect>
                        </g> 
					</g>
				</g>



                <!--特效-->
                <filter id="dropshadow" filterUnits="objectBoundingBox" x="-5000" y="-5000" height="10000" width="10000" color-interpolation-filters="sRGB">
                    <!-- 颜色 -->
                     <!-- <feComponentTransfer in="SourceAlpha" >
                        <feFuncR type="discrete" tableValues="0.35"/>
                        <feFuncG type="discrete" tableValues="0.4"/>
                        <feFuncB type="discrete" tableValues="0.5"/>
                        <feFuncA type="discrete" tableValues="0.5"/>
                    </feComponentTransfer> -->
                    

                    <feColorMatrix 
                    result="original" id="c1" type="matrix" 
                    values="0.35 0 0 0 0  
                            0 0.4 0 0 0 
                            0 0 0.5 0 0 
                            0 0 0 0.4 0" />
                    <!--高色模糊-->
                    <feGaussianBlur stdDeviation="9"/>
                    <!--颜色的位置-->
                    <feOffset dx="0" dy="11" result="shadow"/>

                    <feComposite in="SourceGraphic" in2="shadow" operator="over"/>
                </filter>
			</svg>
        </div>
        <!-- 存放物体的内容 -->
        <div id="body-shade">


        </div>


    </div>
    <!-- 头部内容 -->
    <div id="header">
        <img class="img-logo" src="./img/icon/logo400_106.svg" height="45px" />
        <button class="button-file" v-on:click = "on_fileClick">
            <img src="./img/icon/file.png" height="50%" style="vertical-align: bottom;" />
            <span style="height: 50%;">文件</span>
        </button>
        <div id="header-name">
            <input type="text" id="header-name-input" placeholder="项目名称" v-model="titleName" />
            <button  id="header-name-btn" v-on:click = "on_saveName">
                <img src="./img/icon/ok.png" height="20px" style="vertical-align: bottom;" />
            </button>
        </div>
        <button class="button-file button-float-right" v-on:click = "on_saveClick">
            <img src="./img/icon/save.png" height="50%" style="vertical-align: bottom;" />
            <span style="height: 50%;">保存</span>
        </button>
        <div id="header-modelShift">
            <h3>模式切换</h3>
            <div id="hm-btns">
                <div 
                    class="hmb-item" 
                    :class="modelType=='model_server'?'hmb-item-true':''" 
                    v-on:click = "on_moudelType('model_server')" 
                >服务端</div>
                <div 
                    class="hmb-item" 
                    :class="modelType=='model_app'?'hmb-item-true':''" 
                    v-on:click = "on_moudelType('model_app')" 
                
                >app端</div>
                <!-- <div class="hmb-shade"></div> -->
            </div>
        </div>
    </div>
    <!-- 页面底部属性使用  -->
    <div id="footer">
        <p>当前版本:v1.1.0</p>
        <p>选中的对象:{&nbsp;&nbsp;文本域{computed_thisSelectObject}!&nbsp;&nbsp;}</p>
    </div>
    <!-- 控制端用于放大页面的操作 -->
    <div id="controller">
        <div id="controller-TheUpAndDown">
            <div class="controller-size">
                <button v-on:click="on_magnify"     ><img src="./img/controller/controller-add.png" /></button>
                <button class="cs-text">文本域{Math.round(mediaSize.data) }!%</button>
                <button v-on:click="on_reduce"      ><img src="./img/controller/controller-minus.png" /></button>
            </div>
            <div class="controller-remove">
                <button  v-on:click="on_original"   ><img src="./img/controller/controller-reboot.png" /></button>
            </div>
            <div class="controller-btn">
                <button ><img src="./img/controller/controller-properties.png" /></button>
                <button ><img src="./img/controller/controller-collect.png" /></button>
                <button ><img src="./img/controller/controller-custom.png" /></button>
            </div>
        </div>
        
    </div>
    <!-- 当前属性的内容用户有选中设计某个内容的属性显示 -->
    <div id="properties" v-show="computed_thisSelectObject">
        <!-- 主体内容 -->
        <div id="properties-body" v-if="thisObject">
            <!--  -->
            <p class="properties-title">当前选中model的属性</p>
            <hr/>
            <p class="properties-content properties-weight">对象基础属性</p>
            <p class="properties-content "><span>选中的对象:</span><span v-if="thisObject.data">[文本域{thisObject.data.name}!]</span></p>
            <p class="properties-content"><span>模型类型:</span><span v-if="thisObject">[文本域{thisObject.component}! ]</span>
            </p>
            <p class="properties-content"><span>当前继承:</span><span v-if="!(thisObject.data || main.requestData[main.requestData.modelType][thisObject.data.parentId].data)">[文本域{main.requestData[main.requestData.modelType][thisObject.data.parentId].data.name}!]</span></p>
        

       
            <component  
                :is="thisObject.component+'_properties'    "
                :this-object="thisObject"
            ></component>



            <div class="properties-button">
                <button class="del" v-on:click="fun_delete_byObject"  >删除</button>
            </div>

         


        </div>
    </div>
    <!-- 页面组件的使用 -->
    <div id="component" >
        <!-- 管理页面组件 -->
        <component-manage :component_manage_isshow="component_manage_isShow" />

    </div>





</body>
<!-- 配置文件 -->
<script type="text/javascript" src="./config.js"></script>


<!-- 自定义工具 -->
<script type="text/javascript" src="./js/util/util_parseDompath.js" ></script>
<script type="text/javascript" src="./js/util/util_uuid.js" ></script>
<script type="text/javascript" src="./js/util/util_getUrlParams.js" ></script>
<!-- 引入框架 -->
<!-- <script type="text/javascript" src="./js/module/Vue.js" ></script> -->
<script type="text/javascript" src="./js/module/vue.js"></script>
<script type="text/javascript" src="./js/module/axios.min.js" ></script>
<script type="text/javascript" src="./js/module/anime-master/lib/anime.min.js" ></script>
<!-- 组件内容 -->
<script type="text/javascript" src="./js/entity/page-component-manage.js" ></script>
<!-- 引入的框的模块内容 -->
<script type="text/javascript" src="./js/entity/space_component_main.js"></script>
<script type="text/javascript" src="./js/entity/space_component_mode.js"></script>
<script type="text/javascript" src="./js/entity/space_component_users.js"></script>

<script type="text/javascript" src="./js/entity/space_component_string.js"></script>

<script type="text/javascript" src="./js/entity/space_component_field.js"></script>
<script type="text/javascript" src="./js/entity/space_component_linkTo.js"></script>
<script type="text/javascript" src="./js/entity/space_component_safety.js"></script>
<script type="text/javascript" src="./js/entity/space_component_link.js"></script>
<!-- 主要脚本内容  优先级最高 -->
<script type="text/javascript" src="./js/index.js"></script>
<script type="text/javascript" src="./js/index-body.js"></script>
<script type="text/javascript" src="./js/index-header.js"></script>
<script type="text/javascript" src="./js/index-controller.js"></script>
<script type="text/javascript" src="./js/index-footer.js"></script>
<script type="text/javascript" src="./js/index-properties.js"></script>
<script type="text/javascript" src="./js/index-component.js"></script>





</html>